.left{
  position: fixed;top:0;left: 0;transition: all .2s ease;
  width: 180px;height: 100%;z-index: 1;background: rgba(0,0,0,.8);overflow: hidden; 
}
.left.active{width: 0px;}
.left *{box-sizing: border-box;}
.left>div{
  width: 100%;height: 120px;border-bottom: 1px solid rgba(255,255,255,.5);
}
.left>div img{
  width:70px;height: 70px; margin-top: 15px;border-radius: 50%;border: 1px solid #ccc;
}
.left>div p{color: #fff;padding: 5px;}
.left>ul{
  overflow: hidden;width: 100%;padding-top: 10px;
}
.left>ul li{
  display: block;
  text-align: left;
  overflow: hidden;
  margin: 0;
}
.left>ul li >span{
  display: block;
  line-height: 35px;
  color: rgba(255,255,255,.6);
  height: 35px;overflow: hidden;
  cursor: pointer;
}
.left>ul li >span i{
  float: left;display: block;margin-left: 25px;
  margin-right: 5px;font-size: 20px;
}
.left>ul li >dl{
  padding-left: 57px;
  overflow: hidden;
}
.left>ul li.active{border-left: 4px solid red; background: rgba(0,0,0,.9)}
.left>ul li.active >span i{margin-left: 21px;}
.left>ul li.active >dl{padding-left: 53px;}
.left>ul li.active  >dl dd{
  height: auto;padding-bottom: 8px;
}
.left>ul li >dl dd{
  height: 0;transition: all .2s ease;
}
.left>ul li >dl dd.error a{color: red;}
